<template>
  <el-dialog
    title="图表"
    :visible.sync="visible"
    :append-to-body="true"
    top="10vh"
    width="825px"
    :before-close="handleClose">
    <div id="xb-chart" class="charts"></div>
  </el-dialog>
</template>
<script>
  import {lineOption} from "../../../config/chartOption";
  const colors = ['#FFB346','#59CE75','#14C2D6']
  export default {
    name:'chart-modal',
    data(){
      return{
        visible:false,
        xbchart:null,
        title:''
      }
    },
    methods:{
      handleClose(){
        this.visible = false
      },
      showModal(data,key,name){
        this.visible = true
        this.initChart(data,key,name)
      },
      initChart(data,key,name){
        let options = _.cloneDeep(lineOption),arr= []
        data[key].split(',').forEach((o,i)=>{
          arr.push(Number(o));
          options.xAxis.data.push(i+1)
        })
        options.series = [{
          name,
          type:'line',
          symbolSize: 0,
          data:arr,
          lineStyle: {
            normal: {
              color: colors[0], // 线条颜色
            },
          },
          areaStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: colors[0]
              },
                {
                  offset: 1,
                  color: 'rgba(255, 255, 255, 0)'
                }
              ], false),
              shadowBlur: 0
            }
          },
          itemStyle : {
            color: colors[0],
            borderColor: colors[0],
            borderWidth: 3,
          }
        }]
        options.legend.data = [name]
        this.$nextTick(()=>{
          this.xbchart = this.$echarts.init(
            document.getElementById(`xb-chart`)
          )
          this.xbchart.setOption(options,true)
        })

      }
    }
  }
</script>
<style scoped>
  .charts{
    height: 300px;
  }
</style>
